    /*通用全局变量*/

    @import 'variables.scss';

    @font-face {
        font-family: uniicons;
        font-weight: normal;
        font-style: normal;
        /* src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype'); */
        src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf?t=1536565627510') format('truetype');
    }

    /*通用 */

    view {
        display: flex;
        flex-direction: row; // line-height: 180%;
        line-height: 1.8em;
        font-size: 28upx;
    }

    .ts-space-between {
        justify-content: space-between !important;
    }

    .ts-full-width {
        width: 100%;
    }

    .ts-gap {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: $ts-padding;
        background: $uni-bg-color-grey;
    }

    .ts-center {
        justify-content: center;
        align-items: center;
    }

    .ts-flex {
        display: flex;
        flex-direction: row;
    }

    .ts-flex-item {
        flex: 1;
    }

    .ts-row {
        display: flex;
        flex-direction: row;
    }

    .ts-column {
        display: flex;
        flex-direction: column;
    }

    .ts-h6 {
        font-size: 24upx;
        color: #8f8f94;
        line-height: 1.8em;
    }

    .ts-h5 {
        font-size: 30upx;
        line-height: 1.8em;
    }

    .ts-h4 {
        font-size: 36upx;
        line-height: 1.8em;
    }

    .ts-h3 {
        font-size: 42upx;
        line-height: 1.8em;
    }

    .ts-h2 {
        font-size: 50upx;
        line-height: 1.8em;
    }

    .ts-h1 {
        font-size: 60upx;
        line-height: 1.8em;
    }

    .ts-input {
        height: 50upx;
        min-height: 50upx;
        padding: 15upx 0;
        line-height: 50upx;
    }

    /*数字角标*/

    .ts-badge,
    .ts-badge-default {
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        box-sizing: border-box;
        font-size: 20upx;
        line-height: 20upx;
        padding: 5upx 5upx;
        color: #333;
        border-radius: 10upx;
    }

    .ts-badge.ts-badge-inverted {
        padding: 0 5upx 0 0;
        color: #929292;
        background-color: transparent
    }

    .ts-badge-primary {
        color: #fff;
        background-color: #007aff
    }

    .ts-badge-blue.ts-badge-inverted,
    .ts-badge-primary.ts-badge-inverted {
        color: #007aff;
        background-color: transparent
    }

    .ts-badge-green,
    .ts-badge-success {
        color: #fff;
        background-color: #4cd964;
    }

    .ts-badge-green.ts-badge-inverted,
    .ts-badge-success.ts-badge-inverted {
        color: #4cd964;
        background-color: transparent
    }

    .ts-badge-warn,
    .ts-badge-yellow {
        color: #fff;
        background-color: #f0ad4e
    }

    .ts-badge-warn.ts-badge-inverted,
    .ts-badge-yellow.ts-badge-inverted {
        color: #f0ad4e;
        background-color: transparent
    }

    .ts-badge-danger,
    .ts-badge-red {
        color: #fff;
        background-color: #dd524d
    }

    .ts-badge-danger.ts-badge-inverted,
    .ts-badge-red.ts-badge-inverted {
        color: #dd524d;
        background-color: transparent
    }

    .ts-badge-purple,
    .ts-badge-royal {
        color: #fff;
        background-color: #8a6de9
    }

    .ts-badge-purple.ts-badge-inverted,
    .ts-badge-royal.ts-badge-inverted {
        color: #8a6de9;
        background-color: transparent
    }

    /*折叠面板 */

    .ts-collapse-content {
        height: 0;
        width: 100%;
        overflow: hidden;
    }

    .ts-collapse-content.ts-active {
        height: auto;
    }

    /*卡片视图 */

    .ts-card {
        background: #fff;
        border-radius: 8upx;
        margin: 20upx 0;
        position: relative;
        box-shadow: 0 2upx 4upx rgba(0, 0, 0, .3);
    }

    .ts-card-content {
        font-size: 30upx;
    }

    .ts-card-content.image-view {
        width: 100%;
        margin: 0;
    }

    .ts-card-content-inner {
        position: relative;
        padding: 30upx;
    }

    .ts-card-footer,
    .ts-card-header {
        position: relative;
        display: flex;
        min-height: 50upx;
        padding: 20upx 30upx;
        justify-content: space-between;
        align-items: center;
    }

    .ts-card-header {
        font-size: 36upx;
    }

    .ts-card-footer {
        color: #6d6d72;
    }

    .ts-card-footer:before,
    .ts-card-header:after {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 2upx;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .ts-card-header:after {
        top: auto;
        bottom: 0;
    }

    .ts-card-media {
        justify-content: flex-start;
    }

    .ts-card-media-logo {
        height: 84upx;
        width: 84upx;
        margin-right: 20upx;
    }

    .ts-card-media-body {
        height: 84upx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .ts-card-media-text-top {
        line-height: 36upx;
        font-size: 34upx;
    }

    .ts-card-media-text-bottom {
        line-height: 30upx;
        font-size: 28upx;
        color: #8f8f94;
    }

    .ts-card-link {
        color: #007AFF;
    }

    /* 列表 */

    .ts-list {
        background-color: #FFFFFF;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .ts-list:after {
        position: absolute;
        z-index: 10;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1upx;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .ts-list:before {
        position: absolute;
        z-index: 10;
        right: 0;
        top: 0;
        left: 0;
        height: 1upx;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .ts-list-cell {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .ts-list-cell-hover {
        background-color: #eee;
    }

    .ts-list-cell-pd {
        padding: 22upx 30upx;
    }

    .ts-list-cell-left {
        padding: 0 30upx;
    }

    .ts-list-cell-db,
    .ts-list-cell-right {
        flex: 1;
    }

    .ts-list-cell:after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 30upx;
        height: 1upx;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .ts-list .ts-list-cell:last-child:after {
        height: 0upx;
    }

    .ts-list-cell-last.ts-list-cell:after {
        height: 0upx;
    }

    .ts-list-cell-divider {
        position: relative;
        display: flex;
        color: #999;
        background-color: #f7f7f7;
        padding: 10upx 20upx;
    }

    .ts-list-cell-divider:before {
        position: absolute;
        right: 0;
        top: 0;
        left: 0upx;
        height: 1upx;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .ts-list-cell-divider:after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0upx;
        height: 1upx;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        background-color: #c8c7cc;
    }

    .ts-list-cell-navigate {
        padding: 22upx 30upx;
        line-height: 48upx;
        position: relative;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        justify-content: space-between;
        align-items: center;
    }

    .ts-list-cell-navigate {
        padding-right: 36upx;
    }

    .ts-navigate-badge {
        padding-right: 50upx;
    }

    .ts-list-cell-navigate.ts-navigate-right:after {
        font-family: uniicons;
        content: '\e583';
        position: absolute;
        right: 24upx;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .ts-list-cell-navigate.ts-navigate-bottom:after {
        font-family: uniicons;
        content: '\e581';
        position: absolute;
        right: 24upx;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .ts-list-cell-navigate.ts-navigate-bottom.ts-active:after {
        font-family: uniicons;
        content: '\e580';
        position: absolute;
        right: 24upx;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .ts-collapse.ts-list-cell {
        flex-direction: column;
    }

    .ts-list-cell-navigate.ts-active {
        background: #eee;
    }

    .ts-list.ts-collapse {
        box-sizing: border-box;
        height: 0;
        overflow: hidden;
    }

    .ts-collapse .ts-list-cell {
        padding-left: 36upx;
    }

    .ts-collapse .ts-list-cell:after {
        left: 52upx;
    }

    .ts-list.ts-active {
        height: auto;
    }

    /* 三行列表 */

    .ts-triplex-row {
        display: flex;
        flex: 1;
        width: 100%;
        box-sizing: border-box;
        flex-direction: row;
        padding: 22upx 30upx;
    }

    .ts-triplex-right,
    .ts-triplex-left {
        display: flex;
        flex-direction: column;
    }

    .ts-triplex-left {
        width: 84%;
    }

    .ts-triplex-right {
        width: 16%;
        text-align: right;
    }

    /* 图文列表 */

    .ts-media-list {
        padding: 22upx 30upx;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        flex-direction: row;
    }

    .ts-navigate-right.ts-media-list {
        padding-right: 74upx;
    }

    .ts-pull-right {
        flex-direction: row-reverse;
    }

    .ts-pull-right>.ts-media-list-logo {
        margin-right: 0upx;
        margin-left: 20upx;
    }

    .ts-media-list-logo {
        height: 84upx;
        width: 84upx;
        margin-right: 20upx;
    }

    .ts-media-list-logo image {
        height: 100%;
        width: 100%;
    }

    .ts-media-list-body {
        height: 84upx;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        overflow: hidden;
    }

    .ts-media-list-text-top {
        width: 100%;
        line-height: 36upx;
        font-size: 34upx;
    }

    .ts-media-list-text-bottom {
        width: 100%;
        line-height: 30upx;
        font-size: 28upx;
        color: #8f8f94;
    }

    /* 九宫格 */

    .ts-grid-9 {
        background: #f2f2f2;
        width: 750upx;
        /* flex: 1; */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-top: 2upx solid #eee;
    }

    .ts-grid-9-item {
        width: 250upx;
        height: 200upx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 2upx solid;
        border-right: 2upx solid;
        border-color: #eee;
        box-sizing: border-box;
    }

    .no-border-right {
        border-right: none;
    }

    .ts-grid-9-image {
        width: 100upx;
        height: 100upx;
    }

    .ts-grid-9-text {
        width: 250upx;
        line-height: 60upx;
        height: 40upx;
        text-align: center;
        font-size: 30upx;
    }

    .ts-grid-9-item-hover {
        background: rgba(0, 0, 0, 0.1);
    }

    /* 上传 */

    .ts-uploader {
        flex: 1;
        flex-direction: column;
    }

    .ts-uploader-head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .ts-uploader-info {
        color: #B2B2B2;
    }

    .ts-uploader-body {
        margin-top: 16upx;
        overflow: hidden;
    }

    .ts-uploader__file {
        float: left;
        margin-right: 18upx;
        margin-bottom: 18upx;
    }

    .ts-uploader__img {
        display: block;
        width: 158upx;
        height: 158upx;
    }

    .ts-uploader__input-box {
        float: left;
        position: relative;
        margin-right: 18upx;
        margin-bottom: 18upx;
        width: 154upx;
        height: 154upx;
        border: 2upx solid #D9D9D9;
    }

    .ts-uploader__input-box:before,
    .ts-uploader__input-box:after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #D9D9D9;
    }

    .ts-uploader__input-box:before {
        width: 4upx;
        height: 79upx;
    }

    .ts-uploader__input-box:after {
        width: 79upx;
        height: 4upx;
    }

    .ts-uploader__input-box:active {
        border-color: #999999;
    }

    .ts-uploader__input-box:active:before,
    .ts-uploader__input-box:active:after {
        background-color: #999999;
    }

    .ts-uploader__input {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    /*问题反馈*/

    .feedback-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20upx;
        color: #8f8f94;
        font-size: 28upx;
    }

    .feedback-star-view.feedback-title {
        justify-content: flex-start;
        margin: 0;
    }

    .feedback-quick {
        position: relative;
        padding-right: 40upx;
    }

    .feedback-quick:after {
        font-family: uniicons;
        font-size: 40upx;
        content: '\e581';
        position: absolute;
        right: 0;
        top: 50%;
        color: #bbb;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .feedback-body {
        background: #fff;
    }

    .feedback-textare {
        height: 200upx;
        font-size: 34upx;
        line-height: 50upx;
        width: 100%;
        box-sizing: border-box;
        padding: 20upx 30upx 0;
    }

    .feedback-input {
        font-size: 34upx;
        height: 50upx;
        min-height: 50upx;
        padding: 15upx 20upx;
        line-height: 50upx;
    }

    .feedback-uploader {
        padding: 22upx 20upx;
    }

    .feedback-star {
        font-family: uniicons;
        font-size: 40upx;
        margin-left: 6upx;
    }

    .feedback-star-view {
        margin-left: 20upx;
    }

    .feedback-star:after {
        content: '\e408';
    }

    .feedback-star.active {
        color: #FFB400;
    }

    .feedback-star.active:after {
        content: '\e438';
    }

    .feedback-submit {
        background: #007AFF;
        color: #FFFFFF;
        margin: 20upx;
    }

    .ts-box {
        padding: 0upx;
        border: #CCCCCC solid 1upx;
    }

    /* .ts-box-section {
	display: flex;
	flex: 1;
	flex-direction: row;
	background-color: #cccccc;
	height: 100upx;
	justify-content: center;
	align-items: center;
} */

    /*背景颜色*/

    .ts-background-black {
        background: #000000
    }

    .ts-background-white {
        background: #FFFFFF
    }

    .ts-background-primary {
        background: #007aff
    }

    .ts-background-green,
    .ts-background-success {
        background: #4cd964;
    }

    .ts-background-warn,
    .ts-background-yellow {
        background: #f0ad4e
    }

    .ts-background-danger,
    .ts-background-red {
        background: #dd524d
    }

    .ts-background-purple,
    .ts-background-royal {
        background: #8a6de9
    }

    .ts-text {
        font-size: 30upx;
        line-height: 2.2em;
    }

    .ts-text-small {
        font-size: 24upx;
        line-height: 1.8em;
    }

    .ts-text-indent {
        text-indent: 2em;
    }

    .ts-text-bold {
        font-weight: bold;
    }

    .ts-text-discount {
        text-decoration: line-through;
    }

    /*文本颜色*/

//     .ts-text-black {
//         color: #000000;
//     }

    .ts-text-default {
        color: #000000;
    }

    .ts-text-primary {
        color: $uni-color-primary;
    }

    // .ts-text-green,
    .ts-text-success {
        color: $uni-color-success;
    }

 // .ts-text-yellow ,
    .ts-text-warning 
    {
        color: $uni-color-warning;
    }

    
    // .ts-text-red,
    .ts-text-error{
        color: $uni-color-error;
    }

//     .ts-text-purple,
//     .ts-text-royal {
//         color: #8a6de9
//     }

    /* .ts-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
} */

    .ts-ellipsis {
        display: -webkit-box;
        text-overflow: ellipsis;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .ts-ellipsis-2 {
        display: -webkit-box;
        text-overflow: ellipsis;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .ts-ellipsis-3 {
        display: -webkit-box;
        text-overflow: ellipsis;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    /*padding and margin*/

    .ts-padding {
        padding: $ts-padding;
    }

    .ts-padding-left {
        padding-left: $ts-padding;
    }

    .ts-padding-right {
        padding-right: $ts-padding;
    }

    .ts-padding-bottom {
        padding-bottom: $ts-padding;
    }

    .ts-padding-top {
        padding-top: $ts-padding;
    }

    .ts-padding-both {
        padding-top: $ts-padding;
        padding-bottom: $ts-padding;
    }

    .ts-margin {
        margin: $ts-padding;
    }

    .ts-margin-left {
        margin-left: $ts-padding;
    }

    .ts-margin-right {
        margin-right: $ts-padding;
    }

    .ts-margin-bottom {
        margin-bottom: $ts-padding;
    }

    .ts-margin-top {
        margin-top: $ts-padding;
    }

    .ts-margin-both {
        margin-top: $ts-padding;
        margin-bottom: $ts-padding;
    }

    .ts-section {
        background-color: $uni-bg-color;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .ts-section-body {
        background-color: $uni-bg-color;
        position: relative; // width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 20upx;
        font-size: 28upx; // line-height: 150%;
        line-height: 1.8em;
    }

    .ts-section-footer {
        background-color: $uni-bg-color;
        position: relative; // width: 100%;
        display: flex;
        flex: 1;
        flex-direction: row;
        padding: 20upx;
        font-size: 28upx;
        line-height: 1.8em;
        &:before {
            position: absolute;
            z-index: 10;
            right: 0;
            top: 0;
            left: 0;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            background-color: $uni-border-color;
        }
    }

    .ts-section-title {
        background-color: $uni-bg-color;
        position: relative; // width: 100%;
        color: $section-color-title;
        display: flex;
        flex: 1;
        flex-direction: column;
        line-height: 1.8em;
        padding: 20upx;
        font-size: 36upx; // font-weight: bold;
        &:after {
            position: absolute;
            z-index: 10;
            right: 0;
            bottom: 0;
            left: 0;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            background-color: $uni-border-color; // background-color: #c8c7cc;
        }
    }